<template>
  <div class="form-single-fragment" style="position: relative">
    <div class="task-title">
      <div>
        <span class="text">外勤审批</span>
        <el-tag effect="dark" size="mini" type="success"
          >当前节点：查看详情</el-tag
        >
        <!-- <el-tag  effect="dark" size="mini" type="info">{{'发起人：'}}</el-tag> -->
      </div>
    </div>
    <div class="traval_submit">
      <!-- <el-button
        slot="operator"
        type="primary"
        size="mini"
        class="submit"
        @click="travalCancle"
      >
        取消
      </el-button> -->
    </div>
    <el-radio-group v-model="tab" size="mini" style="margin-bottom: 15px">
      <el-radio-button label="表单信息"></el-radio-button>
      <el-radio-button label="流程图"></el-radio-button>
      <el-radio-button label="审批记录"></el-radio-button>
    </el-radio-group>
    <div v-show="tab === '表单信息'">
      <el-form
      ref="info"
      :model="info"
      class="full-width-input"
      style="width: 100%"
      label-width="120px"
      size="mini"
      label-position="right"
    >
        <el-form-item label="外勤定位：">{{info.address}}</el-form-item>
        <el-form-item label="拜访客户：">{{info.customerId}}</el-form-item>
        <el-form-item label="关联类型：">{{info.projectState}}</el-form-item>
        <el-form-item label="关联项目：">{{info.projectName}}</el-form-item>
        <el-form-item label="关联名称：">{{info.projectName}}</el-form-item>
        <el-form-item label="抵消打卡：">{{info.clockIn}}</el-form-item>
        <el-form-item label="外勤事由：">{{info.remake}}</el-form-item>
         <el-form-item label="附件：">
          <!-- <el-image v-for="item in fileList"
            :preview-src-list="(fileList || []).map(imgItem => imgItem.url)"
            class="table-cell-image" :key="item.url" :src="item.url" fit="fill"></el-image> -->
          <template >
          <el-image v-for="item in  showImg"
            :preview-src-list="( showImg || []).map(imgItem => imgItem.url)"
            class="table-cell-image" :key="item.url1" :src="item.url" fit="fill" >
          </el-image>
          <br>
        </template>
        <a style="text-decoration: none;color:#000;"  v-for="item in  fileList" :key="item.url" href="javascript:void(0);" @click="downloadFile(item.url, item.filename)">
          {{item.name }}<br>
        </a>
        </el-form-item>
    </el-form>
    </div>
    <div v-show="tab === '流程图'">
      <ProcessViewer
        :style="{ height: getMainContextHeight - 148 + 'px' }"
        :xml="entryXml"
        :finishedInfo="finishedInfo"
        :allCommentList="tableList"
      />
    </div>
    <div v-show="tab === '审批记录'">
      <el-table
        size="mini"
        header-cell-class-name="table-header-gray"
        ref="tableImpl"
        :data="tableList"
      >
        <el-table-column
          label="序号"
          header-align="center"
          align="center"
          type="index"
          width="55px"
        />
        <el-table-column label="流程环节" prop="taskName" />
        <el-table-column label="执行人" prop="createUsername"></el-table-column>
        <el-table-column label="操作" prop="approvalType">
          <!-- <template slot-scope="{ row }">
            {{ row.masterData.leaveBeginTime }}
          </template> -->
        </el-table-column>
        <el-table-column label="审批意见" prop="comment"></el-table-column>
        <el-table-column label="处理时间" width="180px" prop="createTime" />
      </el-table>
    </div>
    <label class="page-close-box">
      <el-button type="text" @click="onClose" icon="el-icon-close"></el-button>
    </label>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import ProcessViewer from '@/views/workflow/components/ProcessViewer.vue';

/* eslint-disable-next-line */
import { findTreeNode, findTreeNodePath, findItemFromList,getToken } from '@/utils';
/* eslint-disable-next-line */
/* eslint-disable-next-line */
import { DropdownWidget } from '@/utils/widget.js';
// import flowMixins from '../../mixins/flowMixins.js';
/* eslint-disable-next-line */
import { uploadMixin, statsDateRangeMixin } from '@/core/mixins';
/* eslint-disable-next-line */
import { FieldFlowController, DictionaryController } from '@/api';
import { FlowfieldApproval, FlowOperationController } from '@/api/flowController.js';
import projectConfig from '@/core/config';
// const processDefinitionKey = "flowField";

export default {
  name: 'formFlowField',
  data () {
    return {
      info: {},
      tab: '表单信息',
      textarea: '',
      entryXml: null,
      tableList: [],
      finishedInfo: null,
      fileList: [],
      showImg: [],
      formData: {
        FieldFlow: {
          id: undefined,
          address: '', // 出差地点
          // customerId: undefined,
          projectState: '', // 关联类型
          projectId: '', // 关联项目
          projectName: '', // 项目名称
          // clockIn: undefined,
          beginTime: undefined, // 开始时间
          endTime: undefined, // 结束时间
          date: undefined, // 共计天数
          remake: '', // 出差事由
          // updateUserId: undefined, // 用户id
          // updateTime: undefined, // 提交时间
          createUserId: undefined, // 创建用户
          createTime: undefined // 创建时间
          // postLevel: undefined,
          // appendix: undefined,
          // isDatasourceInit: false
        }
      },
      // 保存草稿后返回的taskId
      draftTaskId: undefined,
      // 保存草稿后返回的流程实例ID
      draftProcessInstanceId: undefined,
      formFlowField: {
        formFilter: {},
        formFilterCopy: {},
        clockIn: {
          impl: new DropdownWidget(this.loadClockInDropdownList)
        },
        projectName: {
          impl: new DropdownWidget(this.loadProjectNameDropdownList)
        },
        isInit: false
      }
    }
  },
  components: {
    ProcessViewer
  },
  computed: {
    ...mapGetters(['getMainContextHeight'])
  },
  methods: {
    // 关闭当前页面按钮
    onClose () {
      this.$router.go(-1)
    },
    // 获取详情数据
    onViewTaskClick () {
      let params = {
        processInstanceId: this.$route.query.processInstanceId
      }
      FlowfieldApproval.viewInitialHistoricTaskInfo(this, params)
        .then((res) => {
          // console.log('打印一下获取详情数据', res)
          // if (res.data) {
          //   this.info = res.data
          // }
          // console.log('回显的数据', res.data)
          this.info = res.data;
          let arr = []
          if (res.data.appendix) {
            let token = getToken()
            arr = JSON.parse(res.data.appendix)
            // console.log('打印下arr', arr)
            this.showImg = arr.filter(item => {
              return item.filename.substr(item.filename.lastIndexOf('.')) === '.jpg' || item.filename.substr(item.filename.lastIndexOf('.')) === '.png'
            })
            // console.log('后缀', this.showImg)
            arr.forEach(item => {
              item.url = `${projectConfig.baseUrl}admin/app/fieldFlow/download?id=${res.data.id}&fieldName=appendix&asImage=true&filename=${item.filename}&Authorization=${token}`
            });
          }
          this.fileList = arr;
          // console.log('打印fileList', this.fileList)
        }).catch((e) => {})
    },
    // 审批记录
    getRecords () {
      FlowOperationController.listFlowTaskComment(this, {
        processInstanceId: this.$route.query.processInstanceId
      }).then((res) => {
        this.tableList = res.data;
      });
    },
    // 流程图
    getProcessBpmn () {
      FlowOperationController.viewProcessBpmn(this, {
        processDefinitionId: this.$route.query.processDefinitionId
      }).then((res) => {
        this.entryXml = res.data;
      });
    },
    // 流程图高亮内容
    getViewHighlightFlowData () {
      FlowOperationController.viewHighlightFlowData(this, {
        processInstanceId: this.$route.query.processInstanceId
      }).then((res) => {
        this.finishedInfo = res.data;
      });
    },
    /**
     * 更新外勤申请
     */
    refreshFormFlowField (reloadData = false) {
      if (!this.formFlowField.isInit) {
        // 初始化下拉数据
      }
      this.formFlowField.isInit = true;
    },
    ...mapActions(['reloadMessage'])
  },
  mounted () {
    // 初始化页面数据
    this.onViewTaskClick()
    this.getRecords()
    this.getProcessBpmn()
    this.getViewHighlightFlowData()
  }
};
</script>
<style scoped>
.task-title {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 3px solid #409eff;
}
.task-title .text {
  height: 28px;
  line-height: 28px;
  font-weight: 600;
  font-size: 16px;
  color: #383838;
}
.task-title .el-tag {
  margin-left: 10px;
}
.traval_submit{
  text-align: right;
}
.submit {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
  margin-bottom: 10px;
}

</style>
